<template>
    <ZwUnityKitTreeTableSelect
        v-model="isShow"
        title="选择朋友圈素材"
        :tree-fetch-api="treeFetchApi"
        :table-fetch-api="tableFetchApi"
        :search-options="searchOptions"
        :table-options="tableOptions"
        :radio-data="radioData"
        @submit="submit"
        @close="close" />
</template>

<script setup lang="tsx">
import { ref, computed, getCurrentInstance } from 'vue';
import { getGroupList, getFriendsList } from '../api/selectFriendMaterial';
import ZwUnityKitTreeTableSelect from '../components/ZwUnityKitTreeTableSelect/Index.vue';
import TableImage from './components/TableImage';
import TableVideo from './components/TableVideo';
import TableLink from './components/TableLink';

defineOptions({
    name: 'ZwUnityKitSelectFriendMaterial'
});

const app = getCurrentInstance();
const searchOptions = ref<any[]>([
    {
        type: 'input',
        label: '',
        key: 'content',
        value: '',
        placeholder: '搜索素材'
    }
]);
const tableOptions = ref<any[]>([
    {
        prop: 'title',
        label: '标题',
        width: 200
    },
    {
        prop: 'content_text',
        label: '内容',
        width: 200
    },
    {
        prop: 'content_text',
        label: '图片/视频/链接',
        width: 240,
        render({ row }) {
            switch (row.type) {
                case 1:
                    return <TableImage row={row} />;
                case 2:
                    return <TableVideo row={row} />;
                case 3:
                case 6:
                case 7:
                case 8:
                case 9:
                    return <TableLink row={row} />;
                default:
                    return '--';
            }
        }
    },
    {
        prop: 'created_at',
        label: '添加时间',
        width: 200
    }
]);
const treeFetchApi = ref<any[]>([]);
const tableFetchApi = ref<any[]>([]);

interface PropsType {
    modelValue: boolean; // 是否显示组件
    radioData: any;
}

const props = withDefaults(defineProps<PropsType>(), {
    modelValue: false,
    radioData: () => null
});

const emits = defineEmits<{
    (e: 'update:modelValue', isShow: boolean): void;
    (e: 'submit', val: any): void;
    (e: 'close'): void;
}>();

const isShow = computed({
    get() {
        if (props.modelValue) {
            setApi();
        }
        return props.modelValue;
    },
    set(val) {
        emits('update:modelValue', val);
    }
});

const submit = val => {
    emits('submit', val);
};

const close = val => {
    emits('close');
};

const setApi = () => {
    const treeParams = { type: 8, app };
    treeFetchApi.value = [treeParams, getGroupList];
    const tableParams = { app };
    tableFetchApi.value = [tableParams, getFriendsList];
};
</script>
